<template>
    <el-dialog height="600" :close-on-click-modal="false" class="dialog-def" :fullscreen="fullscreen" v-model="dialogVisibleShow" width="100%">
            <template #header>
                <div class="dialog-title">
                    <div class="left">
                        预览
                    </div>
                    <div class="right">
                        <el-icon style="cursor:pointer;" @click="fullscreenEv">
                            <CopyDocument v-if="fullscreen == true" />
                            <FullScreen v-else />
                        </el-icon>
                    </div>
                </div>
            </template>
            <div style=" display: flex; align-items: center;justify-content: center;">
                <iframe width="100%" :height="elDialogBody" :src="previewDataStr"></iframe>
            </div>
        </el-dialog>
</template>

<script setup>
import {
    FullScreen,
    CopyDocument
} from '@element-plus/icons-vue'
import { ref,onMounted,onActivated } from 'vue'
import { loadingStore } from '@/stores/index.js'
const loading = loadingStore()
const dialogVisibleShow = ref(false)
const fullscreen = ref(false)
const elDialogBody = ref('500')
let previewDataStr = ref(null)
onMounted(() => {

});
onActivated(() => {

})
const fullscreenEv = ()=>{
    fullscreen.value = !fullscreen.value
    if (fullscreen.value==true) {
        elDialogBody.value  = document.body.clientHeight - 100
    } else {
        elDialogBody.value = '500'
    }
}
const loadingEv = ()=>{
    console.log(loading)
    loading.loading = true
    console.log(9999)
}
defineExpose({
    dialogVisibleShow,
    previewDataStr,
    loadingEv
})
</script>

<style lang='less' scoped>

.dialog-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


:deep(.dialog-def .el-dialog__body) {
    height: calc(100% - 50px) !important;
}

</style>